<template>
  <div class="top-nav">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-box">
        <Search size="16" fill="#999" />
        <input type="text" placeholder="狗狗为什么会掉毛" class="search-input" />
      </div>
      <div class="right-icon" @click="handleRightIconClick">
        <Notes theme="outline" size="24" fill="#333"/>
      </div>
    </div>

    <!-- 标签导航 -->
    <div class="nav-scroll-container">
      <div class="nav-items-wrapper">
        <div 
          v-for="(item, index) in navItems" 
          :key="index" 
          class="nav-item"
          :ref="setNavItemRef"
          :class="{ active: currentTab === index }"
          @click="handleTabClick(index)"
        >
          {{ item }}
        </div>
      </div>
      <div 
        class="nav-slider" 
        :style="{ 
          transform: `translateX(${sliderPosition}px)`, 
          width: `${sliderWidth}px` 
        }"
      ></div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, watch, onMounted } from 'vue';
import { Search, Notes } from '@icon-park/vue-next';

const props = defineProps({
  currentTab: {
    type: Number,
    default: 0
  },
  navItems: {
    type: Array,
    default: () => ['推荐', '犬牌', '保险', '流量']
  }
});

const emit = defineEmits(['tab-change', 'icon-click']);

const sliderPosition = ref(0);
const sliderWidth = ref(0);
const navItemRefs = ref([]);

// 使用函数ref来收集导航项元素
const setNavItemRef = (el) => {
  if (el) {
    navItemRefs.value.push(el);
  }
};

// 标签点击：通知父组件更新
const handleTabClick = (index) => {
  emit('tab-change', index);
};

// 右侧图标点击：通知父组件
const handleRightIconClick = () => {
  emit('icon-click');
};

// 计算滑块位置
const calculateSliderPosition = () => {
  nextTick(() => {
    if (navItemRefs.value.length > 0 && props.currentTab < navItemRefs.value.length) {
      const activeItem = navItemRefs.value[props.currentTab];
      if (activeItem) {
        const itemRect = activeItem.getBoundingClientRect();
        const wrapper = document.querySelector('.nav-items-wrapper');
        if (wrapper) {
          const wrapperRect = wrapper.getBoundingClientRect();
          sliderPosition.value = itemRect.left - wrapperRect.left;
          sliderWidth.value = itemRect.width;
        }
      }
    }
  });
};

// 监听当前标签变化
watch(() => props.currentTab, () => {
  calculateSliderPosition();
});

// 组件挂载后计算初始位置
onMounted(() => {
  // 延迟计算确保DOM已渲染
  setTimeout(() => {
    calculateSliderPosition();
  }, 100);
});

// 监听导航项变化
watch(() => navItemRefs.value.length, () => {
  calculateSliderPosition();
});
</script>

<style scoped>
.top-nav {
  padding: 12px 16px 8px;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
}

.search-container {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.search-box {
  display: flex;
  align-items: center;
  border: 2px solid #000;
  border-radius: 20px;
  padding: 4px 14px;
  width: 300px;
  height: 32px;
  box-sizing: border-box;
}

.search-box:focus-within {
  border-color: #ffcc00;
  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.1);
}

.search-box > :first-child {
  margin-right: 8px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  height: 100%;
  padding: 0;
  color: #333;
}

.search-input::placeholder {
  color: #999;
}

.right-icon {
  margin-left: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.nav-scroll-container {
  position: relative;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 8px;
}

.nav-scroll-container::-webkit-scrollbar {
  display: none;
}

.nav-items-wrapper {
  display: inline-flex;
  gap: 8px;
}

.nav-item {
  display: inline-block;
  padding: 8px 20px;
  font-size: 16px;
  cursor: pointer;
  color: #666;
  border-radius: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.nav-item.active {
  color: #000;
  font-weight: 600;
  background: rgba(255, 204, 0, 0.1);
}

.nav-slider {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: #ffcc00;
  border-radius: 3px 3px 0 0;
  transition: transform 0.3s ease, width 0.3s ease;
  left: 0;
}
</style>